<?php
/*
 * Template Name: All Projects
 */
?>

<?php get_header(); ?>

<div id="all-projects-main">
<div class="container12">

	<div class="row noMargin">

		<!-- Content -->
		<div id="content">
		
			<div class="column12">
				<h1>All Projects</h1>
			</div>
			
			<div class="column12 outer">
			
			
				<div id="filter">
				
					<div class="classes">
						<div class="filter-item class c0"><a href="#" data-group="2a">2A</a></div>
					    <div class="filter-item class c0"><a href="#" data-group="5a">5A</a></div>
					    <div class="filter-item class c0"><a href="#" data-group="6a">6A</a></div>
					    <div class="filter-item class c0"><a href="#" data-group="2b">2B</a></div>
					    <div class="filter-item class c0"><a href="#" data-group="5b">5B</a></div>
					    <div class="filter-item class c0"><a href="#" data-group="6b">6B</a></div>
				    </div>
				    
				    <div class="filter-item column2 c1"><a href="#" data-group="animal-food">Animal Welfare <span>and</span> Food Supply</a></div>
				    <div class="filter-item column2 c2"><a href="#" data-group="global-air">Global Warming <span>and</span> Air Pollution</a></div>
				    <div class="filter-item column2 c3"><a href="#" data-group="water-toxic">Water <span>and</span> Toxic Waste</a></div>
				    <div class="filter-item column2 c4"><a href="#" data-group="forest">Deforestation <span>and</span> Wildfires</a></div>
				    <div class="filter-item column2 c5"><a href="#" data-group="recycling-energy">Recycling <span>and</span> Energy</a></div>
				    <div class="filter-item column2 c0"><a class="active" href="#" data-group="all">All <span>&nbsp;</span> Projects</a></div>
				    
				</div>
				
				<div class="spacer"></div>
			
				<div id="grid">
				
				<?php 
					$args = array(
						'posts_per_page'   => 40,
						'order'            => 'DESC',
						'post_type'        => 'post',
						'post_status'      => 'publish',
						'suppress_filters' => true );
					
					// get all the posts
					$posts_array = get_posts( $args ); 
					foreach ( $posts_array as $post ) : setup_postdata( $post ); 
						//echo '<pre style="display: block; height: 800px; width: 100%;">'.print_r($post, true).'</pre>';
						
						// get all the tags
						$all_tags = get_the_tags();
						$tags = array();
						$tag_html = '';
						foreach($all_tags as $tag_item) {
							$tag = $tag_item->name;
							$tags[] = $tag;
							$tag_html .= "'" . $tag . "',";
							
							$t = '';
							switch($tag) {
								case 'Animal Welfare':
								case 'Food Supply':
									$t = 'animal-food'; break;
								case 'Global Warming':
								case 'Air Pollution':
									$t = 'global-air'; break;
								case 'Water':
								case 'Toxic Waste':
									$t = 'water-toxic'; break;
								case 'Deforestation':
								case 'Wildfires':
									$t = 'forest'; break;
								case 'Recycling':
								case 'Energy':
									$t = 'recycling-energy'; break;
							}
							if(!empty($t)) {
								$tags[] = $t;
								$tag_html .= "'". $t . "',";
							}
						}
						$tag_html = substr($tag_html, 0, -1);
						//echo '<pre>'.print_r($tags, true).'</pre>'; 
						
						// build the block
						?>
						<figure class="project-item column3" data-groups="['all', <?php echo $tag_html; ?>]">
							
							<a href="<?php the_permalink(); ?>">
								<?php the_post_thumbnail(); ?>
							</a>
							<div class="desc">
								<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
								<p><?php $post->content; ?></p>
							</div>
							
						</figure>
					
					<?php 
					endforeach;
			
				?>
				
				<script>
				$(document).ready(function() {
				     
				    /* initialize shuffle plugin */
				    var $grid = $('#grid');
				         
				    $grid.shuffle({
				        itemSelector: '.project-item' // the selector for the items in the grid
				    });
				 
				    $('#filter a').click(function (e) {
					    e.preventDefault();
					         
					    // remove and set active class
					    $('#filter a').removeClass('active');
					    $(this).addClass('active');
					         
					    // get group name from clicked item
					    var groupName = $(this).attr('data-group');
					         
					    // reshuffle grid
					    $grid.shuffle('shuffle', groupName );
					});

				});

				
				</script>
				
			</div>
			
		</div>
		<!-- End Content -->
		
	</div>
	
	<div class="row">
		<div class="column12 metainfo"><?php edit_post_link(); ?></div>
	</div>
		
</div>
</div>
<?php get_footer(); ?>